/** @jsxImportSource @emotion/react */
import * as React from "react";
import {RepLink, ReportViewProps,} from "../../common/base";
import {末尾链接, } from "../../common/rarelyVary";
import {CCell, Cell, Embed, RCell, Table, TableBody, TableRow, Text, useTheme} from "customize-easy-ui-component";
import {useThreeColumnView} from "../../hook/useThreeColumnSubr";
import {config设备概况} from "./Regular.O-1";
import {FadeImage} from "../../../comp/FadeImage";
import Img_TS from "../../../images/TS.png";
import {ReportFirstPageHeadLeast} from "../../furnace/rarelyVary";


export const ReportView: React.FunctionComponent<ReportViewProps> = ({
    repId,   source: orc,  verId,rep,
}) => {
    // const [rootMenu]=useRepMenuDirItems(VsProjects默认, orc.Projects, `/reportView/${rep?.modeltype}/ver/${verId}/${repId}`);
  return (
    <React.Fragment>
        <div css={{"@media not print": {marginTop: '1rem', marginBottom: '1rem'}}}>
          <CertificatePage orc={orc} rep={rep}/>
        </div>
        {末尾链接({template: rep?.modeltype, verId, repId: repId || ''})}
    </React.Fragment>
  );
}
//【特殊性】必须看内容调整布局height参数的！！ 固定打印一张A4纸竖版的：注意底下的调整  "@media print": {height:'76vh',} }
export const CertificatePage= ({ orc, rep, children} : { orc: any,rep: any,children?: React.ReactNode}
) => {
    const theme= useTheme();
    const [devInfovw,_2]=useThreeColumnView({orc, config:config设备概况,slash:true,split:[7]});
    const callback = () => {
        return <div  css={{"@media print": {height:'100vh', overflowY: 'hidden',
                        top: '-0.3rem', position: 'relative'
            } }}>
            { ReportFirstPageHeadLeast({theme,rep, mbbm:'FJB/PA1116-1-2021',height:'4.4rem'}) }
            <div css={{
                "@media print": {
                    display: 'flex',
                    flexDirection: 'column',
                    justifyContent: 'space-around',
                    height: 'calc(100vh - 4.5rem)',     //剪掉上面头部的高度 [#需调整]
                }
            }}>
                <Text variant="h3"
                      css={{textAlign: 'center', lineHeight: '0.9', "@media print": {fontSize: theme.fontSizes[5],},}}>
                    特种设备(制造)监督检验证书<br/>
                    <Text>（气瓶）</Text>
                </Text>
                <div>
                    <div css={{display: 'flex',justifyContent: 'space-between',flexDirection: 'row-reverse',}}>
                        <Text css={{marginRight: '2rem',fontSize: '1rem'
                        }}>编号：{rep.isp?.no}</Text>
                    </div>
                    <Table className="FixHei76"  fixed={ ["14.1%", "20%", "29%", "9%", "11%", "%"] }
                            css={ {borderCollapse: 'collapse', "@media print": {height:'76vh',} } } tight  miniw={800}>
                        <TableBody>
                            <RepLink rep={rep} tag={'Survey'}>
                                {devInfovw}
                                {/*顺序上优先的height:'fill-available'被安排上了，而后面的就无效  <TableRow css={{"@media print": {height:'fill-available*/}
                            </RepLink>
                            <TableRow>
                                <CCell colSpan={6}>
                                    <Table fixed={["24%", "39%", "6%", "%"]}
                                           css={{borderCollapse: 'collapse', "@media print": {height:'fill-available'},} }  tight  miniw={800}>
                                        <TableBody>
                                            <TableRow>
                                                <Cell css={{border:'none',textIndent:'2rem'}} colSpan={4}>
                                                按照《中华人民共和国特种设备安全法》、《特种设备安全监察条例》的规定，该批液化石油气钢瓶产品经我机构实施制造监督检验，安全性能符合《气瓶安全技术规程》
                                                （TSG 23-2021）的要求，特发此证书，并 且在该批气瓶产品部位标注有如下监督检验标志。
                                                </Cell>
                                            </TableRow>
                                            <TableRow>
                                                <Cell css={{border:'none',padding:0}} colSpan={4}>
                                                    <Embed css={{width: "96px",margin: "auto",top: '-0.15rem',}} width={43} height={43}>
                                                        <FadeImage src={Img_TS}/>
                                                    </Embed>
                                                </Cell>
                                            </TableRow>
                                            <RepLink rep={rep} tag={'Survey'}>
                                                <TableRow css={{"@media print": {height:'5rem'} }}>
                                                    <RCell css={{border:'none',}}>监检所抽的产品编号：</RCell>
                                                    <Cell colSpan={3} css={{border:'none',}}>{orc?.抽编号 ?? '／'}</Cell>
                                                </TableRow>
                                                <TableRow css={{"@media print": {height:'3rem'} }}>
                                                    <RCell css={{border:'none',}}>本证书适用的产品编号：</RCell>
                                                    <Cell colSpan={3} css={{border:'none',}}>{orc?.适用编号 ?? '／'}</Cell>
                                                </TableRow>
                                            </RepLink>
                                            <TableRow css={{"@media print": {height:'3rem'} }}>
                                                <RCell css={{border:'none',}}>监督检验人员：</RCell>
                                                <Cell css={{border:'none',}}>机erter</Cell>
                                                <RCell css={{border:'none',}}>日期：</RCell>
                                                <Cell css={{border:'none',}}></Cell>
                                            </TableRow>
                                            <TableRow css={{"@media print": {height:'2rem'} }}>
                                                <RCell css={{border:'none',}}>审   核：</RCell>
                                                <Cell css={{border:'none',}}></Cell>
                                                <RCell css={{border:'none',}}>日期：</RCell>
                                                <Cell css={{border:'none',}}>2024-04-10</Cell>
                                            </TableRow>
                                            <TableRow css={{"@media print": {height:'2rem'} }}>
                                                <RCell css={{border:'none',}}>批   准：</RCell>
                                                <Cell css={{border:'none',}}></Cell>
                                                <RCell css={{border:'none',}}>日期：</RCell>
                                                <Cell css={{border:'none',}}>2024-04-10</Cell>
                                            </TableRow>
                                            <TableRow>
                                                <RCell css={{border:'none',}}>监检机构：</RCell>
                                                <Cell colSpan={2} css={{border:'none',}}>{rep?.isp?.ispu?.name}</Cell>
                                                <CCell css={{border:'none',}}>（监督检验机构检验专用章）</CCell>
                                            </TableRow>
                                            <TableRow css={{"@media print": {height:'fill-available'} }}>
                                                <RCell  css={{border:'none',}}>监督检验机构核准证号：</RCell>
                                                <Cell  colSpan={2} css={{border:'none',}}>{rep?.isp?.ispu?.agency?.apno}</Cell>
                                                <CCell css={{border:'none',}}>2024-04-10</CCell>
                                            </TableRow>
                                        </TableBody>
                                    </Table>
                                </CCell>
                            </TableRow>
                        </TableBody>
                    </Table>
                </div>
                <Text css={{fontSize:'0.7rem'}}>注：本证书一式三份，一份监督检验机构存档，两份送制造单位，其中一份由制造单位随产品出厂资料交付。
                </Text>
            </div>
        </div>
    }
    // const [renderAll]=useFolder(callback,'检验证书折叠',false);
    return <>
        <div id="Certificate"/>
        {callback()}
    </>;
};
